import React, { Component } from "react";
import styles from "./personal.module.scss";
import { withRouter } from "react-router-dom";
import HomeFoot from "../Public/public_foot.jsx";
import { getUserinform, getHongbao, getExHongbao} from "../../http/api-p";
import "antd-mobile/dist/antd-mobile.css";
import loginimg1 from "../../assets/login1.jpg";
import loginimg2 from "../../assets/login.jpg";
// 引入仓库 user_id
import store from "../../redux/store/index"
// a.1 引入list组件
import { List } from "antd-mobile";
// import Tabbar from '../Tabbar/Tabbar';
const Item = List.Item;

class personal extends Component {
  // state
  constructor(props) {
    super(props);
    this.state = {
      user_id: store.getState().loginReducer.token.user_id,
      userInform: {},
      hongbao: [],
      exhongbao:[],
    };
  }
  // react 生命周期 axios 请求数据
  async componentDidMount() {
    // 请求 redux 中的 user_id
    // console.log(store.getState().loginReducer.token.user_id)

    // 用户数据信息
    let res = await getUserinform(this.state.user_id);
    // console.log(res)

    // 获取红包
    let hongbao = await getHongbao(this.state.user_id);
    // console.log(hongbao)

    // 请求过期红包数据
    let exhongbao = await getExHongbao(this.state.user_id);
    // console.log(exhongbao)
    
    
    this.setState({
      userInform: res,
      hongbao: hongbao,
      exhongbao: exhongbao,
    });

    
  }

  // 点击事件  路由跳转
  // 登录页
  handleTop1Click =(params) => {
    this.props.history.push("/");
  }
  // 退出登录页
  // handleTop1Click =(params) => {
  //   this.props.history.push("");
  // }
  // 我的余额
  handleNav1Click = (params) => {
    // console.log(this.props)
    this.props.history.push("balance");
  };
  // 我的优惠 红包
  handleNav2Click = (params) => {
    this.props.history.push("benefit");
  };
  // 过期红包
  handleNav3Click = (params) => {
    this.props.history.push("exhongbao");
  }
  // 我的订单
  handleListClick = (params) => {
    this.props.history.push("cart");
  };
  // 服务中心
  handleServiceClick = (params) => {
    this.props.history.push("service");
  };
  // 下载饿了么软件
  handleDownloadClick = (params) => {
    this.props.history.push("download");
  };

  render() {
    return (
      // elemeMy start
      <div className={styles.elemeMyAll}>
        <div className={styles.elemeMy}>
          {/* 1. elemeMyTop1 start 未登录状态*/}
          <div
            className={
              this.state.user_id == "null"
                ? styles.elemeMyTop
                : styles.elemeMyToph
            }
            onClick={this.handleTop1Click}
          >
            <div className={styles.elemeMyTopLeft}>
              <img src={loginimg1} alt="未登录" />
            </div>
            <div className={styles.elemeMyTopCenter}>
              <p
                className={
                  this.state.user_id == "null"
                    ? styles.topLogin1
                    : styles.topLogin2
                }
              >
                请登录/注册
              </p>
            </div>
          </div>
          {/* 1. elemeMyTop1 end */}
          {/* 2. elemeMyTop2 start 登录状态*/}
          <div
            className={
              this.state.user_id !== "null"
                ? styles.elemeMyTop
                : styles.elemeMyToph
            }
            onClick={this.handleTop2Click}
          >
            <div className={styles.elemeMyTopLeft}>
              <img src={loginimg2} alt={this.state.userInform.username} />
            </div>
            <div className={styles.elemeMyTopCenter}>
              <p className={styles.topLogin1}>
                {this.state.userInform.username}
              </p>
            </div>
          </div>
          {/* 2. elemeMyTop2 end */}

          {/* elemeMyNav start */}
          <div className={styles.elemeMyNav}>
            <div className={styles.elemeMyNav1} onClick={this.handleNav1Click}>
              <div className={styles.elemeMyNav1data}>
                <p className={styles.nav1top}>
                  <span className={styles.nav1data}>
                    {this.state.userInform.balance}
                  </span>
                  元
                </p>
                <p className={styles.nav1title}>我的余额</p>
              </div>
            </div>
            {/* elemeMyNav2 start */}
            <div className={styles.elemeMyNav2} onClick={this.handleNav2Click}>
              <div className={styles.elemeMyNav2data}>
                <p className={styles.nav2top}>
                  <span className={styles.nav2data}>
                    {this.state.hongbao.length}
                  </span>
                  个
                </p>
                <p className={styles.nav2title}>我的优惠</p>
              </div>
            </div>
            {/* elemeMyNav3 start */}
            <div className={styles.elemeMyNav3} onClick={this.handleNav3Click}>
              <div className={styles.elemeMyNav3data}>
                <p className={styles.nav3top}>
                  <span className={styles.nav3data}>{this.state.exhongbao.length}</span>个
                </p>
                <p className={styles.nav1title}>过期红包</p>
              </div>
            </div>
            {/* elemeMyNav3 start */}
          </div>
          {/* elemeMyNav end */}

          {/* elemeMyList1 start */}
          <div>
            <List renderHeader={() => ""}>
              <Item
                thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                arrow="horizontal"
                onClick={this.handleListClick}
              >
                我的订单
              </Item>
              <Item
                thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
                onClick={() => {}}
                arrow="horizontal"
              >
                积分商城
              </Item>
              <Item
                thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
                onClick={this.handleVipClick}
                arrow="horizontal"
              >
                饿了么会员卡
              </Item>
            </List>
          </div>
          {/* elemeMyList1 end */}

          {/* elemeMyList2 start */}
          <div>
            <List renderHeader={() => ""}>
              <Item
                thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                onClick={this.handleServiceClick}
                arrow="horizontal"
              >
                服务中心
              </Item>
              <Item
                thumb="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png"
                onClick={this.handleDownloadClick}
                arrow="horizontal"
              >
                下载饿了么APP
              </Item>
            </List>
          </div>
          {/* elemeMyList2 end */}
        </div>
        <HomeFoot></HomeFoot>
      </div>
      // elemeMy end
    );
  }
}

export default withRouter(personal);
